<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <span style="font-size:24px;">欢迎进入"泥岩掘码"后台管理系统: </span><br />超级管理员 <span style="color:#fa6801;">{{ name }}</span>
    </div>
    <div class="dashboard-echarts">
      <div class="box-card">
        <div id="echarts-main1" class="echarts-div">
        </div>
      </div>
      <div class="box-card">
        <div id="echarts-main2" class="echarts-div">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters(['name']),
  },
  data() {
    return {
      option1: {
        title: {
          text: '版块发布统计',
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['代码橱窗', '需求委托', '交流讨论'],
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '代码橱窗',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: '需求委托',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: '交流讨论',
            type: 'line',
            stack: 'Total',
            data: [150, 232, 201, 154, 190, 330, 410],
          },
        ],
      },
    }
  },
  methods: {
    drawLine() {
      let myChart = this.$echarts.init(document.getElementById('echarts-main1'))
      myChart.setOption(this.option1)
    },
    drawLine2() {
      let myChart2 = this.$echarts.init(document.getElementById('echarts-main2'));
      let option2;
      let base = +new Date(2022, 11, 1)
      let oneDay = 24 * 3600 * 1000
      let date = []
      let data = [Math.random() * 10]
      for (let i = 1; i < 10; i++) {
        var now = new Date((base += oneDay))
        date.push(
          [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/')
        )
        data.push(Math.abs(Math.round((Math.random() - 0.5) * 20 + data[i - 1])))
      }
      option2 = {
        tooltip: {
          trigger: 'axis',
          position: function (pt) {
            return [pt[0], '10%']
          },
        },
        title: {
          left: 'center',
          text: '网站访问量',
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: 'none',
            },
            restore: {},
            saveAsImage: {},
          },
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: date,
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%'],
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 10,
          },
          {
            start: 0,
            end: 10,
          },
        ],
        series: [
          {
            name: 'Fake Data',
            type: 'line',
            symbol: 'none',
            sampling: 'lttb',
            itemStyle: {
              color: 'rgb(255, 70, 131)',
            },
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(255, 158, 68)',
                },
                {
                  offset: 1,
                  color: 'rgb(255, 70, 131)',
                },
              ]),
            },
            data: data,
          },
        ],
      }
      option2 && myChart2.setOption(option2);
    },
  },
  mounted() {
    this.drawLine(),
    this.drawLine2()
  },
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
  &-echarts {
    margin-top: 20px;
    display: flex;
    justify-content: space-around;
    text-align: center;
    .box-card {
      width: 600px;
      height: 400px;
      border: 1px solid #ccc;
      border-radius: 10px;
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

      .echarts-div {
        margin: 0 auto;
        width: 600px;
        height: 400px;
      }
    }
  }
}
</style>
